<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="main :: common_head"></head>
<style>
    .mylabel {
        display: inline;
    }

    .greenColor {
        color: green;
    }

    .redColor {
        color: red;
    }
</style>

<body>
<!--删除提示模态框-->
<div class="modal fade" id="delcfmModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel">提示</h4>
            </div>
            <div class="modal-body">是否要删除？</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="deleteProperty()">确定</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!--删除提示模态框结束-->

<div class="container-fluid-full">
    <div class="row-fluid">

        <noscript>
            <div class="alert alert-block span10">
                <h4 class="alert-heading">Warning!</h4>
                <p>You need to have <a href="" target="_blank">JavaScript</a> enabled to use this site.</p>
            </div>
        </noscript>

        <!-- start: Content -->
        <div id="content" class="span10" style="width: 100%;">
            <ul class="breadcrumb" th:if="${#request.getParameter('breadcrumb') == 'true'}">
                <li>
                    <i class="fas fa-circle-notch"></i>
                    <a id="home" href="#" onclick="parent.location.reload()">主页</a>
                    <i class="icon-angle-right"></i>
                </li>
                <li><a href="#">[[${graphInfo.graphName}]]</a></li>
            </ul>
            <div class="row-fluid sortable">
                <div class="box span12">
                    <div class="box-header" data-original-title>
                        <h2><i class="halflings-icon white edit"></i><span class="break"></span>添加[[${graphInfo.graphName}]]中的基础策略</h2>
                    </div>
                    <div class="box-content">
                        <!--<form class="form-horizontal"  th:action="@{/device/addDevice}" method="post">-->
                        <form id="form1" class="form-horizontal">
                            <input type="hidden" id="graphId" name="graphId" th:value="${graphInfo.graphId}">
                            <fieldset>
                                <div class="control-group">
                                    <label class="control-label">源设备:</label>
                                    <div class="controls">
                                        <select id="deviceFrom0" class="select" name="deviceFrom">
                                            <option value="" name="deviceFrom"></option>
                                        </select>
                                        <label class="mylabel">目标设备:</label>
                                        <select id="deviceTo0" class="select" name="deviceTo">
                                            <option value="" name="deviceTo"></option>
                                        </select>
                                        <label class="mylabel">损耗率:</label>
                                        <input class="input-small focused" type="number" id="lossRate0" placeholder="" name="lossRate">
                                        <label class="mylabel">能源属性:</label>
                                        <select id="property0" class="select input-small" name="energyTypeId">
                                            <option value="" name="energyTypeId"></option>
                                        </select>
                                        <!-- <label class="mylabel">是否可共用:</label>
                                        <select id="is_common0" class="select input-small" name="isShard">
                                            <option value="0" name="isShard" selected>否</option>
                                            <option value="1" name="isShard">是</option>
                                        </select> -->
                                        <input type="button" onclick="addRelation()" id="addRel" value="+">
                                        <!--<button type="button" onclick="addRelation()">+</button>-->
                                    </div>
                                </div>
                                <div class="form-actions">
                                    <button id="add" type="submit" class="btn btn-primary" onclick="toAddEdge();return false">提交</button>
                                    <button type="button" class="btn btn-primary" onclick="toDevice()">返回</button>
                                        <!--<button  type="button" class="btn btn-primary" onclick="toAddTest()">测试</button>-->
                                        <!--<button type="button" class="btn btn-primary" id="addAttr" onclick="addProperty()">添加属性</button>-->
                                </div>
                            </fieldset>
                        </form>
                    </div>
                </div><!--/span-->
            </div><!--/row-->
        </div>
    </div>
</div>

<div class="modal hide fade" id="myModal">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
        <h3>Settings</h3>
    </div>
    <div class="modal-body">
        <p>Here settings can be configured...</p>
    </div>
    <div class="modal-footer">
        <a href="#" class="btn" data-dismiss="modal">Close</a>
        <a href="#" class="btn btn-primary">Save changes</a>
    </div>
</div>
<div class="common-modal modal fade" id="common-Modal1" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-content">
        <ul class="list-inline item-details">
            <li><a href="http://sc.chinaz.com">Admin templates</a></li>
            <li><a href="http://sc.chinaz.com">Bootstrap themes</a></li>
        </ul>
    </div>
</div>

<div class="clearfix"></div>

<div th:replace="main::common_js"></div>

<script th:inline="javascript">
    breadcrumb()
    window.onload = function() {
        parent.modifyTitle([[${graphInfo.graphName}]])
    }
</script>

<script th:src="@{/js/detect-element-resize.js}"></script>
<script th:src="@{/js/iframe-resize.js}"></script>

<script type="text/javascript">
    $(function () {
        getPropertyName();
        getDeviceAndProperty();
        $("form div:not(.form-actions) button").click(function (event) { //页面加载时，找到已有的删除按钮，点击时将按钮的ID赋值给deleteBtnID
            $("#delcfmModel").modal("show");
            deleteBtnID = $(event.target).attr("id");
        });
    })
    var j = 1;
    var dataRelationDevice = {}; //设备名
    var propertyName = {}; //能源属性名
    var addEdgeLength = 1; //保存添加策略的条数
    function getDeviceAndProperty() {
        var graphId = document.getElementById("graphId");
        console.log("图谱ID" + graphId.value);
        $.ajax({
            type: "GET",
            dataType: "json",
            url: "/multipower/relationship/graphAndEnergyTypeList/" + graphId.value,
            success: function (data) {
                console.log("节点和能源属性" + data.energyTypeList.length);
                dataRelationDevice = data.deviceList;
                var deviceList = data.deviceList;
                console.log(deviceList);
                console.log(typeof deviceList);
                if (deviceList == "[]") {
                    console.log(1);
                } else {
                    var select = document.getElementById("deviceFrom0"); //获取下拉框
                    var select1 = document.getElementById("deviceTo0");
                    for (var i = 0; i < deviceList.length; i++) {
                        var option = document.createElement("option"); //创建option元素
                        option.setAttribute("value", deviceList[i].deviceId); //赋值
                        option.innerHTML = deviceList[i].deviceName.toString();
                        var option1 = document.createElement("option");
                        option1.setAttribute("value", deviceList[i].deviceId);
                        option1.innerHTML = deviceList[i].deviceName.toString();
                        console.log(option);
                        select.appendChild(option);
                        select1.appendChild(option1);
                    }
                }
            },
        })
    }

    //获取能源属性名
    function getPropertyName() {
        $.ajax({
            type: "GET",
            dataType: "json",
            url: "/multipower/energyType/getAllEnergyType",
            success: function (data) {
                console.log("property" + data);
                propertyName = data; //能源属性名
                console.log(propertyName);
                if (JSON.stringify(data) == "[]") { //能源属性为空
                    console.log(1);
                }
                //能源属性不为空
                else {
                    var select = document.getElementById("property0"); //获取能源属性下拉框
                    // console.log(select);
                    // var selectLength=select.length;
                    for (var i = 0; i < data.length; i++) { //动态给下拉框生成option，并给option赋值
                        var option = document.createElement("option");
                        option.setAttribute("value", data[i].typeId);
                        option.innerHTML = data[i].typeName.toString();
                        console.log(option);
                        select.appendChild(option);
                    }
                }
            },
        })
    }

    //返回上一页
    function toDevice() {
        window.history.back(-1);
    }

    //+按钮的点击时间，动态生成dom元素。实现一次添加多条策略
    function addRelation() {
        //添加关联关系
        var div = document.createElement("div");
        div.setAttribute("class", "control-group");
        var label1 = document.createElement("label");
        label1.innerHTML = "源设备:";
        label1.setAttribute("class", "control-label");
        var div1 = document.createElement("div");
        div1.setAttribute("class", "controls");
        var select = document.createElement("select");
        // select.setAttribute("onchange","getSelectFruit()");
        select.setAttribute("id", "deviceFrom" + j);
        select.setAttribute("name", "deviceFrom");
        var optionNull = document.createElement("option");
        optionNull.setAttribute("value", "");
        optionNull.setAttribute("name", "deviceFrom");
        select.appendChild(optionNull);
        //给新添加的select动态赋值
        for (var i = 0; i < dataRelationDevice.length; i++) {
            var option = document.createElement("option");
            option.setAttribute("value", dataRelationDevice[i].deviceId);
            option.innerHTML = dataRelationDevice[i].deviceName.toString();
            select.appendChild(option);
        }

        var select2 = document.createElement("select");
        // select.setAttribute("onchange","getSelectFruit()");
        select2.setAttribute("id", "deviceTo" + j);
        select2.setAttribute("name", "deviceTo");
        var optionNull2 = document.createElement("option");
        optionNull2.setAttribute("value", "");
        optionNull2.setAttribute("name", "deviceTo");
        select2.appendChild(optionNull2);
        var label5 = document.createElement("label");
        label5.innerHTML = " 目标设备: ";
        label5.setAttribute("class", "mylabel");
        //给新添加的select动态赋值
        for (var i = 0; i < dataRelationDevice.length; i++) {
            var option = document.createElement("option");
            option.setAttribute("value", dataRelationDevice[i].deviceId);
            option.innerHTML = dataRelationDevice[i].deviceName.toString();
            select2.appendChild(option);
        }

        var label3 = document.createElement("label");
        label3.innerHTML = " 损耗率: ";
        label3.setAttribute("class", "mylabel");

        var optionNull1 = document.createElement("option");
        optionNull1.setAttribute("value", "");
        optionNull1.setAttribute("name", "energyTypeId");

        var label4 = document.createElement("label");
        label4.innerHTML = " 能源属性: ";
        label4.setAttribute("class", "mylabel");
        var select1 = document.createElement("select");
        select1.setAttribute("id", "property" + j);
        select1.setAttribute("name", "energyTypeId");
        select1.appendChild(optionNull1);
        //能源属性下拉框动态赋值
        for (var i = 0; i < propertyName.length; i++) {
            var option = document.createElement("option");
            option.setAttribute("value", propertyName[i].typeId);
            option.innerHTML = propertyName[i].typeName.toString();
            select1.appendChild(option);
        }

        // 是否可共用
        // var option1 = document.createElement("option");
        // option1.setAttribute("value", "1");
        // option1.setAttribute("name", "isShard");
        // option1.innerHTML = "是";

        var option2 = document.createElement("option");
        option2.setAttribute("value", "0");
        // option2.setAttribute("name", "isShard");
        option2.innerHTML = "否";
        var br = document.createElement("br");
        var label6 = document.createElement("label");
        label6.innerHTML = "是否可共用: ";
        label6.setAttribute("class", "mylabel");
        var select3 = document.createElement("select");
        select3.setAttribute("id", "is_common" + j);
        // select3.setAttribute("name", "isShard");
        select3.appendChild(option1);
        select3.appendChild(option2);

        //删除能源属性
        var button = document.createElement("button");
        button.setAttribute("type", "button");
        button.setAttribute("class", "btn btn-danger");
        button.innerHTML = "删除";
        button.setAttribute("id", "relationAdd" + j);
        button.setAttribute("onclick", "deleteAddRelation()");
        var input3 = document.createElement("input");
        input3.setAttribute("type", "number");
        input3.setAttribute("class", "input-small");
        input3.setAttribute("name", "lossRate");
        input3.setAttribute("id", "lossRate" + j);

        var span = document.createElement("span");
        span.innerHTML = "&nbsp";
        div.appendChild(label1);
        div1.appendChild(select);
        div1.appendChild(label5);
        div1.appendChild(select2);
        div1.appendChild(label3);
        div1.appendChild(input3);
        div1.appendChild(label4);
        div1.appendChild(select1);
        div1.appendChild(br);
        div1.appendChild(label6);
        div1.appendChild(select3);
        div1.appendChild(span);
        div1.appendChild(button);
        div.appendChild(div1);
        $("#add").parent().before(div);
        j++;
        var allAddEdge = document.getElementsByClassName("control-group");
        addEdgeLength = allAddEdge.length;
    }

    //策略添加提交按钮
    function toAddEdge() {
        //判断该策略源设备和目标设备是否相同。
        for (var i = 0; i < addEdgeLength; i++) { //遍历所有的策略，判断每条策略的源设备和目标是被是否相同(不能自己指向自己)
            var deviceFrom = document.getElementById("deviceFrom" + i); //源设备
            var deviceFromIndex = deviceFrom.selectedIndex;
            var deviceFromValue = deviceFrom.options[deviceFromIndex].innerHTML;
            var deviceTo = document.getElementById("deviceTo" + i); //目标设备
            var deviceToIndex = deviceTo.selectedIndex;
            var deviceToValue = deviceTo.options[deviceToIndex].innerHTML;
            var lossRate = document.getElementById("lossRate" + i); //损耗率
            var property = document.getElementById("property" + i); //能源属性
            // var isShard = document.getElementById("is_common" + i); // 是否可共用
            var propertyIndex = property.selectedIndex;
            var propertyValue = property.options[propertyIndex].innerHTML;
            if (lossRate.value == "") {
                window.parent.layerAlert('损耗率不能为空', {
                    icon: 5,
                    title: "提示"
                });
                return false;
            }

            if (propertyValue == "") {
                window.parent.layerAlert('能源属性不能为空', {
                    icon: 5,
                    title: "提示"
                });
                return false;
            }

            if (deviceFromValue == deviceToValue) {
                window.parent.layerAlert('源设备和目标设备不能相同', {
                    icon: 5,
                    title: "提示"
                });
                return false;
            }
        }

        var graphId = document.getElementById("graphId");
        //策略提交接口，后台判断提交的策略是否已经存在
        $.ajax({
            type: "POST",
            dataType: "json",
            url: "/multipower/relationship/addEdge",
            data: $("#form1").serialize(),
            success: function (data) {
                console.log(data.status);
                if (data.status == "satisfied") { //提交成功
                    window.location.href = "/multipower/relationship/viewRelationship/" + graphId.value;
                }
                if (data.status == "dissatisfied") { // 提交不成功，后台返回已经存在的策略
                    var noticeStr = ""; //提示用户哪些策略已经存在（已经存在的策略无法重复添加）
                    for (var i = 0; i < data.duplicateList.length; i++) {
                        noticeStr += data.duplicateList[i] + "<br/>"
                    }
                    window.parent.layerAlert(noticeStr, {
                        icon: 5,
                        title: "提示"
                    });
                    return false;
                }
            },
        })
    }
</script>
</body>

</html>